<!DOCTYPE html>
<html>
<head>
    <title>任务详情</title>
    #parse("include/header.html")
    <link rel="stylesheet" href="${rc.contextPath}/statics/css/vue-multiselect.min.css">
    <link rel="stylesheet" href="${rc.contextPath}/statics/css/projectManage/taskDetails.css">
</head>
<body>
<div id="taskDetails" class="clearfix" v-cloak>

    <div :style="styleObj">
        <div class="row clearfix panel-slimScroll" >
            <div class="col-md-10 column ">
                <div class="row clearfix">
                    <div v-show="!isEdit" class="col-md-12 column display-flex">
                        <span v-if="taskInfo.state=='0'"><img :src="icon_oper_1">&nbsp;</span>
                        <span v-if="taskInfo.state=='1'"><img :src="icon_oper_2">&nbsp;</span>
                        <span v-if="taskInfo.state=='2'"><img :src="icon_oper_4">&nbsp;</span>
                        <span>{{taskInfo.taskTitle}}</span><span class="date-staff-label">{{taskInfo.finishDate.substring(5,10)}}&nbsp;{{taskInfo.taskStaff}}</span>
                        <span v-show="(taskInfo.taskContent==''||taskInfo.taskContent==null)?false:true">{{taskInfo.taskContent}}</span>
                    </div>
                    <div v-show="isEdit" class="col-md-12 column add-panel" >
                        <div class="col-md-12 column">
                            <div class="col-md-12 column task-edit-div">
                                <div class="col-md-6 column ">
                                    <label><img :src="icon_Title"></label>
                                    <input v-model="taskTitle" id="taskTitle" class="form-control" placeholder="请输入任务名称" required>
                                </div>
                                <div class="col-md-3 column ">
                                    <label><img :src="icon_User"></label>
                                    <input v-model="taskStaff" id="taskStaff" class="form-control" @click="selectStaff" readonly placeholder="请指定负责人" required>
                                </div>
                                <div class="col-md-3 column ">
                                    <label><img :src="icon_Date"></label>
                                    <input v-model="finishDate" id="finishDate" class="form-control datePicker" readonly placeholder="截止时间" required>
                                </div>
                            </div>
                            <div v-show="(taskInfo.taskContent==''||taskInfo.taskContent==null)?false:true"
                                 class="col-md-12 column task-content-edit-div">
                                <input v-model="taskContent" id="taskContent" class="form-control" placeholder="请输入项目详情!">
                            </div>
                        </div>
                        <div class="col-md-12 column display-flex">
                            <div class="col-md-12">
                                <button class="btn btn-sm btn-info" @click="saveTaskInfo">保存</button>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span><a @click="isEdit=false;">取消</a></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 column btn-link-group">
                        <span>添加</span>
                        <span v-show="(taskInfo.taskContent!=''&&taskInfo.taskContent!=null)?false:true">
                            <button type="button" class="btn btn-link column" @click="isAddTaskContent = !isAddTaskContent;">任务详细</button>
                            或者
                        </span>
                        <span>
                            <button type="button" class="btn btn-link column" @click="isAddCheckItem = !isAddCheckItem;">检查项</button>
                        </span>
                    </div>
                    <!--新增项目详情-->
                    <div v-if="isAddTaskContent" class="col-md-12 column display-flex add-panel">
                        <label><img :src="icon_Title"></label>
                        <input v-model="taskContent" class="form-control" placeholder="请输入项目详情!" required>
                        <button type="button" class="btn btn-sm btn-link " @click="addTaskContent">添加任务详细</button>
                        <button type="button" class="btn btn-sm btn-link column" @click="isAddTaskContent = false;">取消</button>
                    </div>
                    <div class="col-md-12 column horizontal-divider"></div>
                    <!--检查项列表-->
                    <div class="col-md-12 column">
                        <div v-for="data in checkItems" class="col-md-12 column check-item">
                            <input type="radio" :checked="data.state=='1'?true:false" title="" @click="checkRadio(data)">&nbsp; <span>{{data.content}}</span>
                        </div>
                    </div>
                    <!--新增检查项-->
                    <div v-show="isAddCheckItem" class="col-md-12 column display-flex add-panel">
                        <label><img :src="icon_Title"></label>
                        <input v-model="content" id="content" class="form-control" placeholder="请指输入检查项内容" required>
                        <button type="button" class="btn btn-link " @click="addCheckItem">添加检查项</button>
                        <button type="button" class="btn btn-link column" @click="isAddCheckItem = false;">取消</button>
                    </div>

                    <!--日志列表-->
                    <div class="col-md-12 column">
                        <div v-for="data in taskLogs" class="col-md-12 column display-flex task-log">
                            <label>
                                <img v-if="data.operateType=='0'" :src="icon_oper_0">
                                <img v-if="data.operateType=='1'" :src="icon_oper_1">
                                <img v-if="data.operateType=='2'" :src="icon_oper_2">
                                <img v-if="data.operateType=='3'" :src="icon_oper_3">
                            </label>
                            <span style="color:#999999;">{{data.operateDate}}</span>
                            <span style="color:#428bca;">{{data.staffName}}</span>
                            <span>{{data.content}}</span>
                        </div>
                    </div>

                    <!--评论-->
                    <div class="col-md-12 column">
                        <div class="col-md-12 column display-flex">
                            <div class="col-md-10 column comment-btn-group">
                                <div @click="function(){addToWorkLog=!addToWorkLog;}"><input type="checkBox" :checked="addToWorkLog"  title=""><span>&nbsp;添加工作日志</span></div>
                                <div @click="addToRiskIssues=!addToRiskIssues;"><input type="checkBox" :checked="addToRiskIssues"  title=""><span>&nbsp;添加到风险问题</span></div>
                                <div @click="addToWeeklyReport=!addToWeeklyReport;"><input type="checkBox" :checked="addToWeeklyReport"  title=""><span>&nbsp;添加到本周周报</span></div>
                            </div>
                            <div class="col-md-2 column float-right">
                                <button class="btn btn-sm btn-link" @click="upload"><span>上传附件</span></button>
                            </div>
                        </div>
                        <div class="col-md-12 column comment-textarea-div">
                            <textarea class="comment-textarea" v-model="taskLogContent" placeholder="请输入评论内容！"></textarea>
                        </div>

                        <div class="col-md-12 column display-flex center-bottom-bar">
                            <div class="col-md-6 column display-flex" style="height: 30px">
                                <button class="btn btn-sm btn-info" @click="saveTaskLog"><span>发表评论</span></button>&nbsp;
                                <button class="btn btn-sm btn-link" @click="backTaskInfo" title="返回任务列表"><span>返回</span></button>
                            </div>
                            <div class="col-md-6 column  send-meg-div display-flex">
                                <span style="margin-top: 5px;margin-right: 10px">发送通知给:</span>
                                <v-select  v-model="noticeUser"
                                           placeholder="选择通知人"
                                           select-label="按enter选择"
                                           :options="stakeholder"
                                           :multiple="true"
                                           label="username"
                                           track-by="username"
                                           :preserve-search="true"
                                           :hide-selected="true"
                                           :close-on-select="false"
                                           style="flex: 1;">
                                </v-select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-md-2 column">

                <div class="row clearfix">
                    <div class="col-md-12 column right-btn-group">
                        <div class="col-md-12 column">
                            <button class="btn btn-sm btn-link" :disabled="taskInfo.state!='1'" @click="changeTaskState('finish')">
                                <img :src="icon_btn_finish">&nbsp;&nbsp;完成
                            </button>
                        </div>
                        <div class="col-md-12 column horizontal-divider"></div>
                        <div class="col-md-12 column">
                            <button class="btn btn-sm btn-link" :disabled="taskInfo.state!='0'" @click="changeTaskState('start')">
                                <img :src="icon_btn_start">&nbsp;&nbsp;标记开始
                            </button>
                        </div>
                        <div class="col-md-12 column horizontal-divider"></div>
                        <div class="col-md-12 column">
                            <button class="btn btn-sm btn-link" @click="delTaskState">
                                <img :src="icon_btn_delete">&nbsp;&nbsp;删除
                            </button>
                        </div>
                        <div class="col-md-12 column horizontal-divider"></div>
                        <div class="col-md-12 column">
                            <button class="btn btn-sm btn-link" @click="startEdit">
                                <img :src="icon_btn_edit">&nbsp;&nbsp;编辑
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!--添加到工作日志-->
    <div id="workLogPanel" class="container-fluid" style="display: none;">
        请确认本项目任务具体的工作时长
        <div class="time-slimScroll" >
            <div style="width: 100%;padding-left: 50px;text-align: left;" v-for="(item, index) in dateList">
                    <span>工作时段{{index+1}}:&nbsp;{{item.startDate}}~{{item.endDate}}</span>
            </div>
        </div>
        <table class="form">
            <tr>
                <td class="formTitle">工作时间:</td>
                <td colspan="5">
                    <div class="col-md-5 iconInput-group">
                        <input id="startDate" placeholder="请选择开始时间" class="form-control" readonly
                               v-model="startDate">
                        <i class="fa fa-calendar right"></i>
                    </div>
                    <div class="col-md-2" style="text-align: center;padding: 5px 0;"><span> -- </span></div>
                    <div class="col-md-5 iconInput-group">
                        <input id="endDate" placeholder="请选择结束时间" class="form-control" readonly
                               v-model="endDate">
                        <i class="fa fa-calendar right"></i>
                    </div>
                </td>
                <td class="float-right">
                    <button class="btn btn-sm btn-link" @click="addTimes">添加时段</button>
                </td>
            </tr>
        </table>
    </div>

    <!--添加到风险问题-->
    <div id="riskIssuesPanel" class="container-fluid" style="display: none;">
        请确认本项风险计划解决人及解决时间
        <table class="form">
            <tr>
                <td class="formTitle">解决人:</td>
                <td class="formValue">
                    <div class="col-md-12 iconInput-group">
                        <input class="form-control" v-model="onChargeStaffName" placeholder="请选择负责人！" @click="selectOnChargeStaff" readonly/>
                        <i class="fa fa-user right"></i>
                    </div>
                </td>
                <td class="formTitle">解决时间:</td>
                <td class="formValue">
                    <div class="col-md-12 iconInput-group">
                        <input class="form-control" v-model="resolveDate" id="resolveDate" placeholder="选择解决时间！" readonly />
                        <i class="fa fa-calendar right"></i>
                    </div>
                </td>
            </tr>
        </table>
    </div>

</div>
#parse("include/footer.html")
<script src="${rc.contextPath}/statics/libs/vue-multiselect.min.js"></script>
<script src="${rc.contextPath}/statics/js/projectManage/taskDetails.js?_${date.systemTime}"></script>
</body>
</html>